<template>
	<view class="content">
		<view class="top">
			<view class="cancel">取消</view>
			<view class="app-title">写笔记</view>
			<view class="mini-btn">发表</view> 
		</view>
		<view class="center">
			<view class="area-input">
				<input class="input-text" type="text" placeholder="不放假的周日，我想..."/>
			</view>
			<view class="select-photo">
				<image class="img-photo" src="../../static/picture.png" mode="aspectFit"></image>
			</view>
			<view class="icon-bottom">
				<view class="add-label">
					<image class="img-label" src="../../static/label.png" mode="">添加标签</image>
				</view>
				<view class="add-adress">
					<image class="img-address" src="../../static/address.png" mode="">添加地点</image>
		
				</view>
				<view class="make-public">
					<image class="img-public" src="../../static/earth.png" mode="">公开</image>
					
				</view> 
			</view>
		</view>
		<view class="bottom">
			<image class="qq-icon" src="../../static/icon-1.png" mode=""></image>
			<image class="pyq-icon" src="../../static/icon-2.png" mode=""></image>
			<image class="history-icon" src="../../static/icon-3.png" mode=""></image>
		</view>
	</view>
</template>
<style>
	.bottom{
		display: flex;
		margin: 3%;
		align-items: center;
	}
	.qq-icon{
		width: 17px;
		height: 17px;
	}
	.pyq-icon{
		width: 20px;
		height: 20px;
		margin-left: 3%;
	}
	.history-icon{
		width: 20px;
		height: 20px;
		margin-left:80%;
	}
	.icon-bottom{
		font-size: 10%;
		color: #999db2;
		height: 15vh;
		display: flex;
		align-items: center;
		
	}
	.img-label{
		width: 16px;
		height: 16px;
	}
	.img-address{
		width: 16px;
		height: 16px;
	}
	.img-public{
		width: 16px;
		height: 16px;
	}
	.add-label{
		font-size: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 130px;
		height: 25px;
		border-radius: 15px;
		background-color: #f3f5f8;
		margin-left: 3%;
		
	}
	.add-adress{
		font-size: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 130px;
		height: 25px;
		border-radius: 15px;
		background-color: #f3f5f8;
		margin-left: 3%;
	}
	.make-public{
		font-size: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100px;
		height: 25px;
		border-radius: 15px;
		background-color: #f3f5f8;
		margin-left: 40%;
		margin-right: 3%;
	}
	
	.center{
		background-color: #FFFFFF;
		display: flex;
		flex-direction: column;
		height: 50vh;
		margin-top: 4%;
	}
	.area-input{
		display: flex;
		margin: 3%;
		height: 35vh;
	}
	.select-photo{
		display: flex;
		height: 50vh;
		align-items: center;
	}
	.img-photo{
		width: 150px;
		height: 150px;
		margin-left: 3%;
	}
	.content{
		background-color:#f3f3f3;
		width: 750rpx;
		height: 100vh;
	}
	.top{
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		padding: 4% 5%;
	}
	.mini-btn{
		display: flex;
		font-size: 80%;
		color: #FFFFFF;
		justify-content: center;
		align-items: center;
		width: 60px;
		height: 25px;
		border-radius: 15px;
		background-color: #c9f0fd;
	}
</style>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>


